<template>
  <div class="call-free">
    <div class="top flex-left">
      <div
        class="wallet-select flex-left"
        v-if="$store.state.userInfo.group === 'administrator'"
      >
        <label>钱包</label>
        <el-select
          v-model="platform_id"
          placeholder="请选择"
          size="medium"
          filterable
          @change="_getCoinsPrice()"
        >
          <el-option
            v-for="(item, index) in list"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <el-button
        type="primary"
        size="medium"
        @click="
          dialog.showSetDialog = true;
          dialog.type = 0;
        "
        >添加币种行情</el-button
      >
    </div>
    <!-- 数据表 -->
    <div class="data-table">
      <el-table
        size="medium"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(211, 215, 212, 0.5)"
        :data="tableData"
        stripe
        header-cell-class-name="headerStyle"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="币种名称"
          prop="coin_name"
          width="200"
        ></el-table-column>
        <el-table-column align="center" label="图标">
          <template slot-scope="item">
            <img :src="item.row.icon" class="scaleImg" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="平台"
          prop="platform"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="主链"
          prop="chain"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="价格（人民币）"
          prop="ticker"
          width="200"
        >
          <template slot-scope="item">
            <div>
              {{ item.row.coin_ticker }}
              <el-popover
                placement="right"
                trigger="click"
                v-model="item.row.showPopover"
                @after-leave="ticker = ''"
              >
                <el-input
                  size="mini"
                  width="100"
                  style="width: 120px; margin-right: 5px"
                  placeholder="价格"
                  v-model="ticker"
                ></el-input>
                <el-button
                  size="mini"
                  type="primary"
                  @click="
                    edit(item.row);
                    item.row.showPopover = false;
                  "
                  >确定</el-button
                >
                <i class="iconfont iconweb-icon-" slot="reference"></i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="item">
            <el-button type="text" style="color: red" @click="del(item.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 价格设置配置 -->
      <price-set
        :platform_id="platform_id"
        v-if="dialog.showSetDialog"
        @cancel="dialog.showSetDialog = false"
        @success="
          dialog.showSetDialog = false;
          _getCoinsPrice();
        "
      ></price-set>
    </div>
  </div>
</template>

<script>
import PriceSet from "@/components/CoinsManage/PriceSet.vue";
import {
  tokensPriceSup,
  getCoinsPrice,
  setCoinPrice,
} from "./Coins.service.js";
export default {
  components: {
    PriceSet,
  },
  computed: {
    list() {
      return this.$store.state.wallet_list;
    },
  },
  data() {
    return {
      loading: false,
      platform_id: String(this.$store.state.userInfo.platform_id),
      ticker: "",
      total: 0,
      tokens: [],
      tableData: [],
      dialog: {
        showSetDialog: false,
        type: 0, //0->添加  1->編輯
        data: {},
      },
    };
  },
  watch: {
    ticker: {
      handler(newVal) {
        let index = newVal.indexOf(".");
        if (index > -1) {
          let n = newVal.substring(0, index + 1);
          let m = newVal.substring(index + 1, newVal.length);
          this.ticker = m.length > 4 ? n + m.substring(0, 4) : n + m;
        }
      },
      deep: true,
    },
  },
  mounted() {
    // this.getSupTokens();
    this._getCoinsPrice();
  },
  methods: {
    // 获取可自定义行情币种
    async getSupTokens() {
      const res = await tokensPriceSup();
      this.tokens = res.data || [];
    },
    // 获取币种行情列表
    async _getCoinsPrice() {
      const res = await getCoinsPrice({ platform_id: this.platform_id });
      this.tableData = res.data || [];
    },
    del(item) {
      console.log(item);
      this.$confirm(
        `是否删除 <span class="confirm-tip-color">${item.coin_name}</span> 币种?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          setCoinPrice("delete", { id: item.id }).then((res) => {
            if (res.code === 0)
              this.$notify.success({
                title: "提示",
                message: "删除成功",
                duration: 1500,
              });
            this._getCoinsPrice();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async edit(item) {
      const res = await setCoinPrice("put", {
        ...item,
        ...{
          ticker: this.ticker,
          platform_id: Number(this.platform_id),
        },
      });
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: "修改成功",
        });
        this._getCoinsPrice();
      }
    },
  },
};
</script>

<style lang="scss">
.call-free {
  position: relative;
  min-height: calc(100vh - 100px);
  .top {
    .wallet-select {
      width: 230px;
      margin-right: 30px;
      color: #606266;
      label {
        width: 60px;
        flex-shrink: 1;
      }
    }
    .category-select {
      width: 230px;
      margin-right: 30px;
      color: #606266;
      label {
        width: 60px;
        flex-shrink: 1;
      }
    }
    .input-with-select {
      width: 341px;
      .el-input-group__append {
        background-color: #66b1ff;
        color: #fff;
      }
    }
  }
  .data-table {
    position: relative;
    // padding-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px;
    .scaleImg {
      max-width: 120px;
      max-height: 23px;
      cursor: pointer;
    }
    .link {
      color: #409eff !important;
    }
  }
  .iconweb-icon- {
    color: #409eff;
    cursor: pointer;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>